<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二题</title>
    <style>
        @import url("../static/css/iconfont.css");

        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            max-width: 1200px;
            margin: auto;
            list-style: none;
        }

        .item-box {
            width: 33%;
            padding: 10px 20px;
        }

        .item {
            display: flex;
            height: 150px;
            box-shadow: 5px 5px 5px #efefef;
            border-radius: 5px;
            padding: 20px 10px 20px 20px;
        }

        .item:hover {
            background-color: #f5f5f5;
        }

        .image {
            width: 70px;
            height: 105px;
        }

        .item-right-box {
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
            padding: 20px 0px 0px 20px;

        }

        .right-desc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #b7b7b7;
            font-size: 80%;
        }

        .desc-row1 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .desc-row2 {
            padding: 2px 0px;
        }

        .desc-row2>span:nth-child(n + 2) {
            border-left: 1px solid #cbcbcb;
            padding-left: 10px;
            margin-left: 10px;
        }

        .desc-row3>span:nth-child(n + 2) {
            margin-left: 5px;
        }

        .name {
            color: #000;
            font-size: 120%;
            font-weight: 900;
            margin-right: 10px;
        }

        .type-box {
            width: 50px;
            height: 50px;
            padding: 2px;
            border-radius: 50%;
        }

        .zs {
            border: 1px dotted #8ddf78;
        }

        .zs>p {
            background-color: #8ddf78;
        }

        .lz {
            border: 1px dotted #dfdfdf;
        }

        .lz>p {
            background-color: #dfdfdf;
        }

        .jz {
            border: 1px dotted #f1be6e;
        }

        .jz>p {
            background-color: #f1be6e;
        }

        .sy {
            border: 1px dotted #90bbed;
        }

        .sy>p {
            background-color: #90bbed;
        }

        .sx {
            border: 1px dotted #ecb6b6;
        }

        .sx>p {
            background-color: #ecb6b6;
        }

        .ls {
            border: 1px dotted  #d3a2f0;
        }

        .ls>p {
            background-color:  #d3a2f0;
        }

        .yp {
            border: 1px dotted #95e3e9;
        }

        .yp>p {
            background-color: #95e3e9;
        }

        
       
        .type-box>p {
            height: 100%;
            width: 100%;
            line-height: 44px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            font-size: 70%;
        }


        .job {
            color: #a4a4a4;
        }

        .yellow {
            color: #f2b95d;
            padding: 0px 3px;
        }

        @media screen and (max-width: 840px) {
            .item-box {
                width: 50%;
            }
        }

        @media screen and (max-width: 600px) {
            .item-box {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <main id="app">
        <ul class="box">
            <li class="item-box" v-for="item in tableData">
                <div class="item">
                    <img :src="item.image_path" class="image">
                    <div class="item-right-box">
                        <div class="right-desc">
                            <p class="desc-row1">
                                <span class="name">{{item.name}}</span>
                                <span class="job">{{item.job}}</span>
                            </p>
                            <div>
                                <p class="desc-row2">{{item.loc}}</p>
                                <p class="desc-row2">
                                    <span>单位工龄<span class="yellow">{{item.year}}</span>年</span>
                                    <span>{{item.sex}}</span>
                                    <span>{{item.city}}</span>
                                </p>
                            </div>
                            <p class="desc-row3">
                                <span class="iconfont icon-dianhua">{{item.tel.substring(0,3)}}</span>
                                <span>{{item.tel.substring(3,7)}}</span>
                                <span>{{item.tel.substring(7,11)}}</span>
                            </p>
                        </div>
                        <div :class="getClass(item.type)">
                            <p>
                                {{item.type}}
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </main>
</body>
<script src="./vue.js"></script>
<script>
    const App = {
        setup() {

            const tableData = [{
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-001.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "正式",
            },
            {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-002.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "离职",
            },
            {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-003.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "兼职",
            }, {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-004.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "试用",
            }, {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-005.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "试用",
            }, {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-006.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "实习",
            }, {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-007.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "临时",
            }, {
                name: "李帅",
                job: "产品经理",
                loc: "产品设计中心",
                image_path: "../static/img/test-008.png",
                year: 2,
                sex: "男",
                city: "上海",
                tel: "13730892577",
                type: "应聘",
            }];

            function getClass(type) {
                if (type == '正式') {
                    return 'type-box zs'
                } else if (type == '离职') {
                    return 'type-box lz'
                } else if (type == '兼职') {
                    return 'type-box jz'
                } else if (type == '试用') {
                    return 'type-box sy'
                } else if (type == '实习') {
                    return 'type-box sx'
                } else if (type == '临时') {
                    return 'type-box ls'
                } else {
                    return 'type-box yp'
                }
            }


            return {
                tableData,getClass
            };
        },
    };
    const app = Vue.createApp(App);
    app.mount("#app");
</script>

</html>